<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="../js/highcharts-5.0.12.js"></script>
  <!--<script type="text/javascript" src="../js/exporting.js"></script>-->
  <script type="text/javascript" src="../js/data.js"></script>
  <style>
    #datatable {
      border: 1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
    }
    td,th {
      border: 1px solid #ccc;
      padding: 4px 20px;
    }
  </style>
  <script>
    $(function () {
      $('#container').highcharts({
        data: {
          table: 'datatable'
        },
        chart: {
          type: 'column'
        },
        title: {
          text: '从 HTML 表格中提取数据并生成图表'
        },
        yAxis: {
          allowDecimals: false,
          title: {
            text: '个',
            rotation: 0
          }
        },
        tooltip: {
          formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
              this.point.y + ' 个' + this.point.name.toLowerCase();
          }
        }
      });
    });
  </script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<p>数据表格</p>
<table id="datatable">
  <thead>
  <tr>
    <th></th>
    <th>小张</th>
    <th>小潘</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th>苹果</th>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <th>梨</th>
    <td>2</td>
    <td>0</td>
  </tr>
  <tr>
    <th>葡萄</th>
    <td>5</td>
    <td>1</td>
  </tr>
  <tr>
    <th>香蕉</th>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <th>橘子</th>
    <td>2</td>
    <td>4</td>
  </tr>
  </tbody>
</table>

</body>
</html>